<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加分类</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
    <style>
        html {background: #fff;padding-top: 20px;}
    </style>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="m_title" lay-verify="required" placeholder="请输入名称" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">PC端显示</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 手机名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="m_wap_title" lay-verify="required" placeholder="请输入手机名称" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">手机端显示</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属分类：</label>
            <div class="layui-input-inline">
                <select name="m_parent_id">
                    <option value="0" selected>顶级类目</option>
                    {volist name="catList" id="cat"}
                    {lt name="$cat.deep" value="3"}
                    <option value="{$cat.id}">{neq name="$cat.parent_id" value="0"}&ensp;└&ensp;{/neq}{$cat.title}</option>
                    {/lt}
                    {/volist}
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-inline">
                <input type="text" id="m_pic" name="m_pic" placeholder="请上传图片" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-info" id="btn_upload" style="padding-left: 10px;padding-right: 10px;">
                    <i class="layui-icon">&#xe681;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-info" id="btn_preview" style="padding-left: 10px;padding-right: 10px;">
                    <i class="layui-icon">&#xe615;</i>预览
                </button>
            </div>
            <div style="float: left;width: 100%;color:#999;padding-left: 137px;box-sizing: border-box;padding-top: 6px;">图片比例为1:1，如：200*200。</div>
            <span style="display:none;" id="pic"><img id="yl_pic" src="/upload/pic/public/nopic.jpg"></span>
        </div>
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">描述：</label>
            <div class="layui-input-block">
                <textarea name="m_info" placeholder="请输入描述" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键词：</label>
            <div class="layui-input-inline w500">
                <input type="text" name="m_keys" placeholder="请输入关键词" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">SEO描述：</label>
            <div class="layui-input-inline w500">
                <input type="text" name="m_des" placeholder="请输入SEO描述" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 排序：</label>
            <div class="layui-input-inline w80">
                <input type="number" name="m_px" lay-verify="number" value="1" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">越大越靠前</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="m_top" value="1" checked lay-skin="switch" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="m_show" value="1" checked lay-skin="switch" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-submit" id="LAY-submit" value="确认">
        </div>
    </div>
</body>
</html>
<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
    layui.use(function(){
        let $ = layui.$;
        let upload = layui.upload;

        //上传
        upload.render({
            elem: '#btn_upload'
            ,url: "{:url('upload/index')}"
            ,data: {dir: 'category'}
            ,accept: 'images'
            ,before: function () {
                layer.load();
            }
            ,done: function(res){
                layer.closeAll();
                if(res.code == 0) {
                    $('#m_pic').val(res.data.file);
                    $('#yl_pic').attr('src',res.data.src);
                }
                else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                layer.closeAll();
                layer.msg('请求异常');
            }
        });
        //预览
        $('#btn_preview').click(function () {
            layer.open({
                type: 1,
                shade: false,
                title: false,
                content: $('#pic')
            });
        });

    });
</script>